import {designPage, reactive} from "@peryl/react-compose";
import {i18n, Plc, PlcGroup, PlcIndex, Table} from "plain-design";
import {PlainObject} from "@peryl/utils/event";
import {DemoRow} from "../../common/DemoRow";
import {useDemoData} from "../../common/useDemoData";

export const Demo1 = designPage(() => {

  const cols = new Array(200).fill(null).map((_, i) => ({ title: `列_${i + 1}`, field: `field_${i}` }));
  const data = new Array(10000).fill(null).map((_, i) => cols.reduce((prev, item) => {
    prev[item.field] = `${item.title},行_${i}`;
    return prev;
  }, {} as PlainObject));
  const fixedData = [data.pop()!];

  const state = reactive({
    data,
  });

  return () => (
    <DemoRow title={i18n.$intl('page.sortList.title1').d('')}>
      <Table
        showRows={10}
        v-model:data={state.data}
        summaryData={fixedData}
        colDraggable
        rowDraggable
        border
        virtualColumn
        virtual
        onClickRowDraggier={() => {console.log('click row draggier');}}
        onClickColDraggier={() => {console.log('click col draggier');}}
      >
        <PlcIndex key="index"/>
        {cols.map((col, index) => (
          <Plc title={col.title} field={col.field} key={col.field} fixed={index === 0 ? 'left' : index === cols.length - 1 ? 'right' : undefined}/>
        ))}
      </Table>
    </DemoRow>
  );
});

export default designPage(() => {
  return () => <>
    <Demo1/>
  </>;
});
